<template>
	<view class="content">
		<view class="content-top-box">
			<view class="content-item">
				<view class="content-item-left">头像</view>
				<view class="content-item-right">
					<image class="user-img" :src="headerImg" mode=""></image>
				</view>
			</view>
		</view>
		<view class="content-top-box">
			<view class="content-item">
				<view class="content-item-left">昵称</view>
				<view class="content-item-right">
					<view>{{nickName}}</view>
					<image class="right-img" :src="rightjiantou" mode=""></image>
				</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">手机号</view>
				<view class="content-item-right">
					<view>{{userPhone}}</view>
					<image class="right-img" :src="rightjiantou" mode=""></image>
				</view>
			</view>
		</view>
		<view class="content-top-box">
			<!-- <view class="content-item">
				<view class="content-item-left">用户协议</view>
				<view class="content-item-right">
					<image class="right-img" :src="rightjiantou" mode=""></image>
				</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">隐私协议</view>
				<view class="content-item-right">
					<image class="right-img" :src="rightjiantou" mode=""></image>
				</view>
			</view> -->
			<view class="content-item" @click="gotoAbout">
				<view class="content-item-left">关于我们</view>
				<view class="content-item-right">
					<image class="right-img" :src="rightjiantou" mode=""></image>
				</view>
			</view>
		</view>
		<view class="content-top-box">
			<view class="content-item">
				<view class="content-item-left">当前版本号</view>
				<view class="content-item-right">
					<view>1.0.0</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 150px;"></view>
		<view class="outLogin-btn-box">
			<view class="outLogin-btn" @click="outLoginFun">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	
	export default{
		data(){
			return{
				rightjiantou:baseUrl+'/uploads/static/image/right-jiantou.png',
				userImg:baseUrl+'/uploads/static/image/recovery_my_top_head@2x.png',
				headerImg:'',
				nickName:'',
				userPhone:'',
			}
		},
		onLoad() {
			let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			console.log(userInfo)
			this.headerImg = userInfo.info.avatar
			this.nickName = userInfo.info.nickname
			this.userPhone = userInfo.info.mobile
		},
		methods:{
			outLoginFun(){
				uni.showModal({
					title:'提示',
					content: '是否确定退出?',
					success: function (res) {
						if (res.confirm) {
							uni.clearStorageSync()
							uni.navigateTo({
								url:'/pages/my/my'
							})
						}
					}
				})
			},
			gotoAbout(){
				uni.navigateTo({
					url:'/pages/my/personAbout'
				})
			}
		}
	}
</script>

<style>
	.content{
		width: 100%;
		min-height: 100vh;
		background: #F8F9FD;
		overflow: hidden;
		font-family: 'PingFang Bold';
	}
	.content-top-box{
		width: calc(100% - 24px);margin: 0 auto;background-color: #fff;border-radius: 10px;box-sizing: border-box;padding:0 15px;margin-top: 12px;
	}
	.content-item{width: 100%;min-height: 70px; display: flex;flex-direction: row;align-items: center;justify-content: space-between;border-bottom: 1px solid #f6f6f6;}
	.content-item:last-child{border: none;}
	.user-img{width: 50px;height: 50px;border-radius: 50%;}
	.content-item-right{display: flex;flex-direction: row;align-items: center;justify-content: flex-end;}
	.right-img{width: 14px;height: 14px;margin-left: 10px;}
	.outLogin-btn-box{position: fixed;bottom: 0;left: 0;width: 100%;z-index: 10;height: calc(70px + env(safe-area-inset-bottom) /2);box-sizing: border-box;padding: 12px;}
	.outLogin-btn{width: 100%;height: 50px;text-align: center;line-height: 50px;color: #fff;background: #00CB8B;border-radius: 10px;}
</style>